<template>
  <div class="container">
    <!-- 面包屑导航 -->
        <navbar></navbar>

    <!-- 面包屑导航 -->
    <div class="Box">
      <div class="table_tab">
        <div class="inquiry">
          <div class="headerbox">
            <div class="header">
              <div class="title_left"></div>
              短信模板
            </div>
            <div class="headerbox_right">

              <!-- <el-button size="mini" @click="back()">返回</el-button> -->
            </div>
          </div>
          <div class="headerTitle">数据筛选</div>
          <el-form
            :inline="true"
            ref="queryForm"
            :model="queryForm"
            label-width=""
            size="mini"
          >
            <el-form-item label="模板标题">
              <el-input
                placeholder="请输入模板标题"
                clearable
                :maxlength="20"
                v-model.trim="queryForm.name"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                @click="searchEvent()"
                plain
                v-on:keyup.enter="searchEvent"
                type="primary"
                >搜索</el-button
              >
              <el-button plain @click="reset()" type="primary">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="inquiryTab">
          <div class="inquiryTab_header">
            <div class="tabTitle">列表数据</div>
            <div>
               <el-button style="width: 130px; height: 36px; line-height: 11px"
                type="primary" @click="refresh()"
                >同步模板数据</el-button
              >
               <el-button
              @click="send"
              type="primary"
              style="width: 80px; height: 36px; line-height: 11px"
              >发 送</el-button
            >
              <!-- v-if="parArray.indexOf('sendCode') != -1" -->

            <el-button
              @click="sendRecord"
              type="primary"
              style="width: 120px; height: 36px; line-height: 11px"
              >发送记录</el-button
            >
            </div>

          </div>
          <div class="table">
            <el-table
              v-loading="loading"
              :data="tableData.list"
              :header-cell-style="{ background: '#f8f8f8' }"
              style="width: 100%"
            >
              <el-table-column label="模板标题">
                <template slot-scope="props">
                  {{ props.row.name }}
                </template>
              </el-table-column>
              <el-table-column label="模板内容" >
                 <template slot-scope="props">
                 <p :title='props.row.content'>{{ props.row.content }}</p>
                </template>
              </el-table-column>

              <el-table-column label="发送方式" prop="typeLabel">
              </el-table-column>
              <el-table-column label="模板状态">
                <template slot-scope="props">
                  <el-tooltip :content="props.row.reviewReply" placement="top" v-if="props.row.reviewReply && props.row.statusLabel == '审核未通过'">
                  <p :class="props.row.statusLabel == '审核通过' ? 'green' : 'red'">
                    {{ props.row.statusLabel }}
                  </p>
                  </el-tooltip>
                  <p :class="props.row.statusLabel == '审核通过' ? 'green' : 'red'" v-else>
                    {{ props.row.statusLabel }}
                  </p>
                </template>
              </el-table-column>
              <el-table-column
                label="最后编辑时间"
                prop="createdTime"
              ></el-table-column>
              <el-table-column label="操作" fixed="right">
                <template slot-scope="props">
                  <p
                    class="btnp"
                    @click="examine(props.row)"
                  >
                    查看
                  </p>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <!-- 分页start -->
    <div class="page">
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-sizes="[10, 20, 50, 100, 200]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.totalNum"
          prev-text="上一页"
          next-text="下一页"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 分页end -->
    <!-- 发送弹框 -->
    <el-dialog
      :title="dialog.title"
      :close-on-click-modal="false"
      append-to-body
      :visible.sync="dialog.visible"
      :width="dialog.width"
      :before-close="handleCloseAddClassify"
    >
      <template v-if="dialog.type == 'send'">
        <el-form ref="form" :rules="rules" :model="form" label-width="100px">
        <el-form-item label="发送对象：">
          <el-radio-group v-model="form.obj">
            <el-radio
              @change="handlerRadio"
              v-for="(item, index) in dictionaries.message_object_type"
              :label="item.dictId"
              :key="index"
              >{{ item.dictName }}</el-radio
            >
          </el-radio-group>

        </el-form-item>
        <el-form-item  v-if="form.obj=='1'">
            <el-cascader
              v-model="form.orgCode"
              :options="optionsOrgName"
              :props="{
                checkStrictly: true,
                label: 'orgName',
                value: 'orgCode',
                children: 'children',
              }"
              clearable
              filterable
              @change="handleSelectOrgName"
            ></el-cascader>
          </el-form-item>
        <el-form-item label="" :inline="true"  >
          <div style="display:inline-block">
            <el-select v-model="form.crowd" clearable placeholder="请选择指定人群" @change="hanglerCrowd" v-if="form.obj=='1'">
              <el-option
                v-for="(item, index) in dictionaries.message_crowd_type"
                :key="index"
                :label="item.dictName"
                :value="item.dictId"
                >
              </el-option>
          </el-select>
          </div>
          <div style="display:inline-block; width:87%" v-if="form.obj!='1'" >
          <el-input
            class="input-new-tag"
            v-model="form.phone"
            ref="saveTagInput"
            placeholder="请输入手机号码按回车添加"
            oninput="value=value.replace(/[^0-9.]/g,'')"
             :maxLength="11"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm"
          >
          </el-input>

          </div>
          <div style="display:inline-block; width:87%" v-if="form.obj!='1'">
            <el-tag
            :key="tag"
            v-for="tag in formPhone"
            closable
            :disable-transitions="false"
            @close="handleClose(tag)"
          >
            {{ tag }}
          </el-tag>
          </div>
          <div style="display:inline-block;margin-left: 10px;" v-if="form.obj=='1'">
            <el-date-picker
            class="arrange_time"
            v-model="form.timeDate"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
              @change="onChangeTime"
             value-format="yyyy-MM-dd HH:mm:ss"
             :default-time="['00:00:00', '23:59:59']">
          </el-date-picker>
          </div>
          <div style="display:inline-block;margin-left: 10px;"  v-if="form.obj=='1'">
              <el-button
                @click="searchCrowd()"
                plain
                type="primary"
                >搜索</el-button
              >
          </div>
          <div v-if="form.obj=='1'">
            预估人数：{{people}}人
          </div>
        </el-form-item>

        <el-form-item label="模板：" prop="template">
            <el-select v-model="form.template" style="width:87%" @change="selectTemplate" clearable  placeholder="请选择模板">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
          </el-select>
          <div class="templateDiv" v-if="templateCenter">
            <p>{{templateCenter}}</p>
            </div>
        </el-form-item>

        <div v-if="paramList.length != 0">
          <el-form-item label="参数"  v-for="(item,index) in customerMessage" :key="index" >
            <span slot="label">
              参数{{index+1}}：
            </span>
            <el-radio-group v-model="paramList[index].paramType" @change="messageModel(index,paramList[index].paramType)">
                <el-radio  label="1">客户信息</el-radio>
                <el-radio  label="2">自定义信息</el-radio>
            </el-radio-group>
              <el-input
                style="padding-left:20px"
                v-if="paramList[index].paramType=='2'"
                class="input-new-tag"
                v-model="paramList[index].paramContent"
                ref="saveTagInput"
                placeholder="请输入客户信息"
              >
              </el-input>
              <el-select style="padding-left:20px" v-model="paramList[index].paramContent"  clearable  placeholder="请选择客户信息" v-if="paramList[index].paramType=='1'">
                  <el-option
                    v-for="(item,index) in dictionaries.message_customer_user_info"
                    :key="index"
                    :label="item.dictName"
                    :value="item.dictId">
                  </el-option>
              </el-select>

          </el-form-item>
        </div>

        <el-form-item label="模板签名：" prop="signature">
            <el-select v-model="form.signature" clearable  style="width:87%" placeholder="请选择模板签名">
              <el-option
                v-for="(item, index) in dictionaries.message_sign_type"
                :key="index"
                :label="item.dictName"
                :value="item.dictId">
              </el-option>
            </el-select>
        </el-form-item>

        <div style="float: right; margin-bottom: 25px">
          <el-button @click="cancel()" class="dialogbtn"
            >取消</el-button
          >
          <el-button
            type="primary"
            class="dialogbtntoo"
            @click="classifyAdd('form')"
            >确定</el-button
          >
        </div>
      </el-form>
      </template>
      <template v-if="dialog.type == 'check'">
      <el-form  label-width="100px">
       <el-form-item label="模板名称：">
          <p>{{rowData.name}}</p>
        </el-form-item>
        <el-form-item label="模板状态：" >
          <p>{{rowData.statusLabel}}</p>

        </el-form-item>
         <el-form-item label="模板内容：">
          <p>{{rowData.content}}</p>

        </el-form-item>
        </el-form>
      </template>
    </el-dialog>
    <!-- 新增分类对话框结束 -->
  </div>
</template>

<script>
import VDistpicker from 'v-distpicker'
import navbar from '@/components/navbar.vue'
export default {

  components: {
    VDistpicker,
    navbar
  },
  data () {
    return {
      dataWarning: false,
      customerMessage: '',
      paramList: [],
      formPhone: [], // 电话号码数组
      loading: false,
      templateCenter: '',
      assignStartTime: '',
      assignEndTime: '',
      people: '0',
      optionsOrgName: [],
      // 新增规格
      form: {
        obj: '1', //	对象
        crowd: '', //	string	指定人群
        timeDate: '', //	string	时间
        template: '', //	string	模板
        signature: '', //	int	模板签名
        phone: '', //
        orgCode: ''
      },
      idDisabled: false, // 防抖使用
      tableData: [],
      dynamicTags: [],
      inputVisible: false,
      inputValue: '',
      addBrand: [],
      propertyDetails: [], // 销售属性详情

      date: '',
      rowId: '', // 列表行ID
      rowList: [],
      selectedOptions: [],

      options: [],
      btnText: '',
      queryForm: {
        name: '' // 规格名称
      },
      // 列表树形控件配置参数
      defaultProps: {
        children: 'children',
        categoryName: 'categoryName'
      },
      cascaderValue: '',
      rules: {
        template: [
          { required: true, message: '请选择模板', trigger: 'change' }
        ],
        signature: [
          { required: true, message: '请选择模板签名', trigger: 'change' }
        ]

      },
      forbidden: false, // 是否禁用
      pageNo: 1,
      pageSize: 10,
      tree: [],
      orgCode: '',
      limits: '',
      parArray: [],
      height: '500px',
      isShow: true,
      expandRow: [],
      dictionaries: { // 字典数据
        message_object_type: [], // 发送对象
        message_crowd_type: [], // 人群类型
        message_sign_type: [], // 消息签名
        message_customer_user_info: []
      },
      dialog: { visible: false, title: '', type: '', width: '' },
      lastTime: 0, // 默认上一次点击时间为0
      rowData: {} // 列表行的数据
    }
  },
  mounted () {

  },
  created () {
    this.getDataList()
    this.getTemplateDataList()
    this.department()
    // 获取字典数据
    for (const type in this.dictionaries) { this.getDictionaries(type) }
    this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
    this.form.orgCode = this.userInfo.orgCode

    // 权限设定判断
    this.limits = JSON.parse(sessionStorage.getItem('limit'))
    const params = this.limits.buttonTreeDto.filter(
      (item) => item.menuCode === 'ShortMessageCode'// 菜单管理里面的菜单编码
    )
    params[0].buttonList.forEach((item) => {
      this.parArray.push(item.code)
    })
  },

  methods: {
    messageModel (index, type) {
      console.log(index, type, 'index,type')
      this.paramList[index].paramContent = ''
      // if(this.paramList[index]){

      // }
    },
    // 搜索预估人数
    searchCrowd () {
      this.getCustomerUserCount()
    },
    // 发送弹框手机号码输入框填写值
    handleInputConfirm (e) {
      const inputValue = this.form.phone

      if (inputValue) {
        this.formPhone.push(inputValue)
      }
      this.form.phone = ''

      // this.form.list = this.form.phone.map(e => ({
      //   content: e
      // }))
    },
    // 弹框内标签相关
    handleClose (tag) {
      console.log(tag)
      this.formPhone.splice(this.formPhone.indexOf(tag), 1)
      // this.form.phone = this.formPhone.map(e => ({
      //   content: e
      // }))
    },
    cancel () {
      //  form: {
      //   obj: '1', //	对象
      //   crowd: '', //	string	指定人群
      //   timeDate: '', //	string	时间
      //   template: '', //	string	模板
      //   signature: '', //	int	模板签名
      //   phone: '' //
      // },、
      this.form.crowd = ''
      this.form.timeDate = ''
      this.form.signature = ''
      this.form.phone = ''
      this.form.template = ''
      this.templateCenter = ''
      this.people = 0
      this.formPhone = []
      this.dialog.visible = false
      // this.form.obj = '1'
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
    },
    refresh () {
      this.loading = true
      const data = {
      }
      this.$api.refreshTemplate(data).then((res) => {
        if (res.code == 0) {
          console.log(res, 'res')
          this.getDataList()
          this.loading = false
        }
      })
    },
    // 选择指定人群
    hanglerCrowd (e) {
      // console.log(e)
      // console.log(this.assignStartTime, 'this.assignStartTime')
      // if (this.assignStartTime && this.assignEndTime && this.form.orgCode) {
      //   this.getCustomerUserCount()
      // }
    },
    selectTemplate (id) {
      console.log(id)
      if (id) {
        this.templateCenter = this.options.find(e => { return e.id == id }).content
        this.customerMessage = this.options.find(e => { return e.id == id }).paramNum

        console.log(this.customerMessage, 'this.templateCenter')
        const tempArr = []
        for (let index = 1; index <= this.customerMessage; index++) {
          const obj = {
            paramType: '1',
            paramContent: ''
          }
          tempArr.push(obj)
        }
        this.paramList = tempArr
      } else {
        this.templateCenter = ''
      }
    },
    // 查询预估人数
    onChangeTime (e) {
      console.log(e)
      if (e) {
        this.assignStartTime = e[0]
        this.assignEndTime = e[1]
      } else {
        this.assignStartTime = ''
        this.assignEndTime = ''
        this.people = '0'
      }
    },
    // 选择公司部门
    handleSelectOrgName () {

    },
    // 查询客户人群数量
    getCustomerUserCount () {
      const data = {
        crowdType: this.form.crowd,
        dateEnd: this.assignEndTime,
        dateStart: this.assignStartTime,
        orgCode: typeof (this.form.orgCode) === 'string' ? this.form.orgCode : this.form.orgCode[this.form.orgCode.length - 1]
      }
      this.$api.getCustomerUserCount(data).then((res) => {
        if (res.code == 0) {
          console.log(res, 'res')
          this.people = res.data
          // this.tableData = res.data
        } else {
          this.people = '0'
        }
      })
    },
    // 发送对象
    handlerRadio (e) {
      console.log(e)
      if (e == 2) {
        this.form.crowd = ''
        this.form.timeDate = ''
        this.people = 0
        this.assignStartTime = ''
        this.assignEndTime = ''
        this.paramList
        if (this.paramList.length != 0) {
          this.paramList.forEach((item) => {
            item.paramContent = ''
          })
        }
        console.log(this.paramList, 'this.paramList')
      } else {
        this.form.phone = ''
        this.formPhone = []
        if (this.paramList.length != 0) {
          this.paramList.forEach((item) => {
            item.paramContent = ''
          })
        }
      }
    },
    // 发送记录
    sendRecord () {
      this.$router.push({ name: 'ShortMessageDetails' })
    },
    // 发送
    send () {
      this.dialog.type = 'send'
      this.dialog.visible = true
      this.dialog.title = '发送'
      this.dialog.width = '700px'
      this.form.crowd = ''
      this.form.timeDate = ''
      this.form.signature = ''
      this.form.phone = ''
      this.form.template = ''
      this.templateCenter = ''
      this.people = 0
      this.formPhone = []
    },
    // 分页
    handleCurrentChange (val) {
      this.pageNo = val
      this.getDataList()
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.getDataList()
    },

    // 获取状态字典数据
    getDictionaries (type) {
      if (type && this.dictionaries[type].length > 0) { return }
      const params = { groupId: type }
      this.$api.dictionaries(params).then((res) => {
        console.log(res, 'resresres')
        this.dictionaries[type] = res.data
      }).catch((err) => {
        console.log(err)
      })
    },
    // 列表数据
    getDataList (type) {
      this.loading = true
      const data = {
        name: this.queryForm.name,
        pageNo: this.pageNo,
        pageSize: this.pageSize
      }
      this.$api.templatePageList(data).then((res) => {
        if (res.code == 0) {
          console.log(res, 'res')
          this.tableData = res.data
          this.loading = false
        }
      })
    },
    getTemplateDataList () {
      const data = {}
      this.$api.templateDataList(data).then((res) => {
        if (res.code === 0) {
          this.options = res.data

          console.log(this.paramList, 'radio2')
        }
      })
    },
    // 发送确定
    classifyAdd (formName) {
      console.log(this.paramList)
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.customerMessage > 0) {
            this.paramList.forEach((item) => {
              if (item.paramContent == '') {
                this.dataWarning = false
              } else {
                this.dataWarning = true
              }
            })
          }

          if (this.customerMessage > 0 && this.dataWarning == false) {
            return this.$message.warning('请填写选择对应模板后的参数！')
          }
          const data = {
            objectType: this.form.obj, // 发送对象 body true integer(int32)
            crowdType: this.form.crowd, // 指定人群类型（发送对象选择“指定人群”时必填） false integer(int32)
            dateEnd: this.assignEndTime, // 开始日期（格式为yyyy-MM-dd，指定人群类型选择“流失客户”时必填） false string
            dateStart: this.assignStartTime, // 开始日期（格式为yyyy-MM-dd，指定人群类型选择“流失客户”时必填）body false string
            phone: this.formPhone, // 客户手机号（发送对象选择“指定客户”时必填）body false string
            signType: this.form.signature, // 模板签名body false string
            templateId: this.form.template, // 模板idbody false integer(int64)
            orgCode: typeof (this.form.orgCode) === 'string' ? this.form.orgCode : this.form.orgCode[this.form.orgCode.length - 1],
            paramList: this.paramList
          }
          this.$api.templateSend(data).then((res) => {
            if (res.code == 0) {
              console.log(res, 'res')
              this.$message.success('发送成功')
              this.dialog.visible = false
              this.$refs.form.resetFields()
              this.getDataList()
            }
          })
        } else {
          return false
        }
      })
    },
    // 部门选择列表
    department () {
      this.axios
        .post(
          '/sys/v1/org/tree/select',
          {
            request: {
              orgName: '',
              orgType: ''
            },
            version: ''
          },
          {
            headers: {
              isLoading: false
            }
          }
        )
        .then((res) => {
          if (res.code == 0) {
            this.optionsOrgName = res.data
          } else {
            this.$message.error(res.message)
          }
        })
    },

    handleCloseAddClassify () {
      this.dialog.visible = false
    },
    // 查看
    examine (row) {
      this.dialog.type = 'check'
      this.dialog.visible = true
      this.dialog.title = '查看模板'
      this.rowData = row
      this.dialog.width = '500px'
    },

    /** *是否正常下拉框的数据请求***/
    /** *重置搜索***/
    reset () {
      this.queryForm = {
        name: '' // 规格名称
      }
      this.pageSize = 10
      this.pageNo = 1
      this.getDataList()
    },
    /** *搜索模拟数据***/
    searchEvent () {
      this.pageSize = 10
      this.pageNo = 1
      this.getDataList()
    },
    /** *搜索模拟数据***/
    forArr (arr, isExpand) { // 展开树形表格
      arr.forEach(i => {
        this.$refs.theTable.toggleRowExpansion(i, isExpand)
        if (i.children) {
          this.forArr(i.children, isExpand)
        }
      })
    }

  }
}
</script>
<style scoped lang="scss">
.div1 {
  margin-left: -16px;
  background: url(../../assets/breadcrumb2.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}
.div2 {
  margin-left: -16px;
  background: url(../../assets/breadcrumb1.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #fff;
}
// 弹框内标签相关
.el-tag + .el-tag {
  margin-left: 10px;
}
.el-tag {
  background-color: #fff;
  color: #333;
  border-color: #d9d9d9;
  font-size: 14px;
}

.button-new-tag {
  margin-left: 10px;
  margin-bottom: 4px;
  height: 33px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
  width: 150px;
  background-color: #e3edff;
  border: none;
  color: #4168e7;
}
.input-new-tag {
  width: 250px;
  vertical-align: bottom;
}
// 弹框内标签相关结束
.el-menu-vertical-demo {
  width: 200px;
  overflow-y: scroll;
  height: 700px;
}
.el-menu-input {
  padding: 0 15px;
  background: #fff;
  /deep/ .el-input__inner {
    height: 30px;
    border: 1px solid #eee;
    margin: 10px 0;
  }
}
.el-menu-vertical-demo::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.btnp {
  display: inline-block;
  vertical-align: middle;
  padding: 0 10px;
  color: #0083ef;
}
.btnp:hover {
  color: #4168e7;
  cursor: pointer;
}
.Box {
  display: flex;
  justify-content: flex-start;
  width: 100%;

  .table_tab {
    width: 100%;
    margin-bottom: 50px;
  }
}
.table {
  border-radius: 5px;
  width: 100%;
}
/deep/.distpicker-address-wrapper select {
  padding: 0rem 0.75rem;
  height: 30px;
  line-height: 30px;
  font-size: 15px;
}

/deep/ .expanded {
  background: #f5f7fa;
  color: #000;
}

/deep/.el-table__expanded-cell[class*="cell"] {
  padding: 0px 50px;
}
/deep/.el-table td,
.el-table th {
  text-align: center;
}
.header {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
  padding-bottom: 10px;
}

.inquiry {
  background: #fff;
  padding: 10px 20px 10px 20px;
  border-radius: 5px;
  .el-form {
    margin-top: 10px;
  }
}
.inquiryTab {
  background: #fff;
  padding: 10px 20px 20px 20px;
  border-radius: 5px;
  .el-form {
    margin-top: 10px;
  }
  margin-top: 20px;
  .inquiryTab_header {
    display: flex;
    justify-content: space-between;
    /deep/ .el-button {
      height: 40px;
    }
  }
}

/deep/.el-table__expand-icon > .el-icon {
  color: transparent;
}

.table {
  margin-top: 10px;
  border: 1px solid #e8eaec;
  border-radius: 0;
  /deep/ .el-input--suffix .el-input__inner {
    background: #409eff;
    color: #fff;
    width: 104px;
    box-shadow: none;
  }
  /deep/ .el-button {
    padding: 10px 13px;
  }
}

.page {
  text-align: right;
  width: 100%;
  background: #f5f5f5;
  padding-right: 30px;
  position: fixed;
  bottom: 0px;
  right: 0px;
  z-index: 5;

  span {
    font-size: 14px;
    color: #666;
    display: inline-block;
    margin-left: 10px;
  }
  .el-pagination {
    display: inline-block;
    vertical-align: middle;
  }
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 200px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
  text-align: left;
}
/deep/.el-table__row:hover {
  color: rgb(45, 125, 223);
}
/deep/.el-dialog__header {
  padding: 20px 20px 20px 20px;
  border-bottom: 1px solid #d9d9d9;
  font-family: PingFang SC;
  font-weight: bold;
  line-height: 25px;
  color: #333333;
}
/deep/.el-dialog {
  border-radius: 10px;
}
/deep/.el-dialog__headerbtn {
  top: 15px;
}
.headerbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  border-bottom: 1px solid #ededed;
  padding-bottom: 10px;
}
.title_left {
  width: 4px;
  height: 16px;
  background: #4c81eb;
  opacity: 1;
  margin-right: 10px;
}
.tabTitle {
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 25px;
  color: #333333;
  opacity: 1;
  margin-top: 10px;
  margin-bottom: 10px;
}
.headerTitle {
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;
  opacity: 1;
  margin-top: 20px;
  margin-bottom: 15px;
}
/deep/.el-form-item__label {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;
}
.red {
  color: #ff0000;
}
.green {
  color: #67c23a;
}

/deep/.el-input.is-disabled .el-input__inner {
  background-color: #fff;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;
}
/deep/ .el-dialog__footer {
  border-top: 1px solid #d9d9d9;
  margin-top: -20px;
  padding-top: 20px;
}
/deep/.el-table thead {
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: bold;
  line-height: 22px;
  color: #333333;
  opacity: 1;
}
.dialogbtn {
  width: 120px;
  height: 36px;
  border: 1px solid #d9d9d9;
  opacity: 1;
  border-radius: 4px;
  line-height: 0px;
}
.dialogbtntoo {
  width: 120px;
  height: 36px;
  background: #4168e7;
  opacity: 1;
  line-height: 0px;
  border-radius: 4px;
}

.arrange_time{
  width: 250px;
}
/deep/.el-table__row td .cell, /deep/.el-table__row td .cell div p{
  display: block;
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;      /* 可以显示的行数，超出部分用...表示*/
  -webkit-box-orient: vertical;
}
.templateDiv{
  padding: 12px;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #333333;
  background: #F5F8FF;
  margin-top: 12px;
  width: 87%;
}
</style>
